<template>
	<view class="content">
		<view class="user_bg" @click="run">
			<image
				:src="userinfo.avatar_bg ? userinfo.avatar_bg:'https://mp-ccffe9fb-6491-49ff-938f-e2f9c933dbd6.cdn.bspapp.com/backgroundImage/tp.png'"
				mode="aspectFill"></image>
		</view>
		<uni-transition ref="ani" :show="true">
			<view class="user_center" @click="uprun">
				<view class="user_info">
					<view class="user_avatar" @click="previewImage">
						<u-avatar
							:src="userinfo.avatar ? userinfo.avatar:'https://mp-ccffe9fb-6491-49ff-938f-e2f9c933dbd6.cdn.bspapp.com/backgroundImage/default_avatar.png' "
							size="120"></u-avatar>
					</view>
					<view class="user_data" v-if="hasLogin">
						<view class="top">
							<text>关注:{{me_like}}</text>
							<text>粉丝：{{fans}}</text>
							<text>获赞:{{likenums}}</text>
						</view>
						<view class="buttom">
							<view class="left">
								<text>昵称:{{userinfo.nickname}}</text>
							</view>

							<view class="right" @click="goperson">
								<text>个人中心</text>
								<u-icon name="arrow-right" color="#9b9b9b" size="25"></u-icon>
							</view>
						</view>
					</view>
					<view class="user_data onlogo" v-else>
						<view @click="gologo">
							<text>请先登录</text>
							<u-icon name="arrow-right" color="#9b9b9b" size="30"></u-icon>
						</view>
					</view>
				</view>
				<view class="user_list">
					<u-cell-group>
						<u-cell :titleStyle="{color:'#c2d5ff'}" @click="self_edit" icon="account-fill" :isLink="true"
							size="large" title="个人资料"></u-cell>
						<u-cell :titleStyle="{color:'#c2d5ff'}" @click="self_piece" icon="moments" :isLink="true"
							size="large" title="我的作品"></u-cell>
						<u-cell :titleStyle="{color:'#c2d5ff'}" @click="self_zp" icon="order" :isLink="true"
							size="large" title="招聘信息"></u-cell>
						<u-cell :titleStyle="{color:'#c2d5ff'}" @click="self_workinfo" icon="info-circle-fill"
							:isLink="true" size="large" title="我的投递"></u-cell>
						<u-cell :titleStyle="{color:'#c2d5ff'}" @click="setting" icon="warning-fill" :isLink="true" size="large"
							title="屏蔽内容"></u-cell>
						<u-cell :titleStyle="{color:'#c2d5ff'}" v-if="hasLogin" @click="outlogo" icon="account"
							:isLink="true" size="large" title="退出登录"></u-cell>
					</u-cell-group>
				</view>
			</view>
		</uni-transition>

		<u-modal @cancel="cancel" @confirm="confirm" :showCancelButton="true" confirmText="确认退出" :show="immediate"
			title="您将要退出" ></u-modal>
	</view>
</template>

<script>
	import {
		filterfansarr
	} from '@/utils/filterfansarr.js'
	import {
		store,
		mutations
	} from '@/uni_modules/uni-id-pages/common/store.js'
	const db = uniCloud.database()
	export default {
		data() {
			return {
				immediate:false,
				hasLogin: store.hasLogin,
				userinfo: [],
				user_id: '',
				me_like: 0,
				fans: 0,
				video_idlist:[],
				likenums:0
			};
		},
		onLoad() {
			if (this.hasLogin) {
				this.getuserinfo()
			}
			this.user_id = uniCloud.getCurrentUserInfo().uid
			this.getfollow()
			this.getmyfance()
			this.getmypiece_id()
			// this.getlikenumber()
		},
		onShow() {
			uni.$on('update', this.callback)
			console.log('伤心事')
			uni.$on('self_gz',(e)=>{
				console.log(e,"2222")
			})
		},
		methods: {
			//设置页面
			setting(){
				uni.navigateTo({
					url:'/pages_self/block_info/block_info'
				})
			},
			
			//获取信息
			async getuserinfo() {
				await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`).field(
						'nickname,avatar,avatar_bg')
					.get().then(res => {
						this.userinfo = res.result.data[0]

					})
			},
			//下滑动
			run() {
				// 同时右平移到 100px,旋转 360 读
				this.$refs.ani.step({
					translateY: '35px',

				}, {
					timingFunction: "ease",
					duration: 500
				})
				// 开始执行动画
				this.$refs.ani.run(() => {

				})
				if (this.hasLogin) {
					uni.chooseImage({
						count: 1,
						success: async res => {
							console.log(res);
							if (res.tempFilePaths.length > 0) {
								let filePath = res.tempFilePaths[0]
							}
							uni.showLoading({
								title: "请稍等",
								mask: true
							})
							let newfilename = ''
							//name是否存在app和微信小程序不存在
							if (!res.tempFiles[0].name) {
								//不存在，表示小程序或者app
								let filearr = res.tempFiles[0].path.split('.')
								newfilename = '.' + filearr[filearr.length - 1]
							} else {
								//存在，表示h5运行
								let filearr = res.tempFiles[0].name.split('.')
								newfilename = '.' + filearr[filearr.length - 1]
							}
							console.log(newfilename)
							await uniCloud.uploadFile({
								filePath: res.tempFiles[0].path,
								cloudPath: '/user_info/' + Date.now() + newfilename,
								cloudPathAsRealPath: true
							}).then(async re => {
								this.src = re.fileID
								uni.hideLoading()
								uni.showToast({
									title: '上传成功'
								})
								this.uprun()
								await db.collection('uni-id-users').where(`_id==$cloudEnv_uid`)
									.update({
										"avatar_bg": re.fileID
									}).then(res => {
										this.getuserinfo()
									})
							})
						}
					})

				}
			},
			//上滑动	
			uprun() {
				// 同时右平移到 100px,旋转 360 读
				this.$refs.ani.step({
					translateY: '0px',


				}, {
					timingFunction: "ease",
					duration: 800
				})
				// 开始执行动画
				this.$refs.ani.run(() => {

				})
			},

			//编辑个人资料
			self_edit() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "/pages_self/self_edit/self_edit"
					})

				} else {
					uni.navigateTo({
						url: '/pages_self/gologo/gologo'
					})
				}

			},
			//个人作品
			self_piece() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages_self/self_piece/self_piece'
					})

				} else {
					uni.navigateTo({
						url: '/pages_self/gologo/gologo'
					})
				}
			},
			//招聘
			self_zp() {

				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages_self/my_recrui/my_recrui'
					})

				} else {
					uni.navigateTo({
						url: '/pages_self/gologo/gologo'
					})
				}
			},
			//个人中心
			goperson() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/userinfo/userinfo"
				})
			},
			self_workinfo() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages_self/my_resume/my_resume'
					})
				
				} else {
					uni.navigateTo({
						url: '/pages_self/gologo/gologo'
					})
				}
		
			},
			//登录
			gologo() {
				uni.navigateTo({
					url: "/uni_modules/uni-id-pages/pages/login/login-withpwd"
				})
			},
		
			//预览图片
			previewImage() {
				uni.previewImage({
					urls: [
						`${this.userinfo.avatar || 'https://mp-ccffe9fb-6491-49ff-938f-e2f9c933dbd6.cdn.bspapp.com/backgroundImage/default_avatar.png'}`]
				})
			},
			callback() {
				this.getuserinfo()
			},
			async getfollow() {
				await db.collection("fans").where({
					'user_id': this.user_id
				}).get().then(res => {
					console.log(res, 'dsdsa')
					if (res.result.data != 0) {
						this.me_like = res.result.data[0].like_other.length
					}
				})
			},
			async getmyfance() {
				await db.collection("fans").get().then(res => {
					let newarr = res.result.data.map(item => {
						return item.like_other
					})
					let a = filterfansarr(newarr, this.user_id)
					this.fans = a
				})
			},
			//获取我发布的的作品id
		async	getmypiece_id(){
				
			
			await	db.collection("video-articles").where({
					'user_id':this.user_id
				}).get().then(res=>{
					
					let temps=res.result.data
					 this.video_idlist=temps.map(item=>{
						return item._id
					})
					this.getlikenumber()
				
				})
			
			},
			async getlikenumber(){
				
			let nums=0
				
				for (let i = 0; i < this.video_idlist.length; i++) {
					
				await	db.collection("like").where({
						'video-id':this.video_idlist[i]
					}).get().then(res=>{
					
						if(res.result.data.length!=0){
								nums=nums+res.result.data[0].userlike_arr.length
						}
				
					})
				}
				this.likenums=nums
			},
			cancel(){
				this.immediate=false
							
				},
			confirm(){
				this.immediate=false
				uni.showLoading({
					title:'退出中'
				})
				mutations.logout().then(res => {
					this.hasLogin = false
					this.userinfo = []
					
					uni.hideLoading()
					uni.showToast({
						title:"退出成功"
					})
					console.log(this.hasLogin,"?")
				})
			},
			 outlogo() {
				this.immediate=true
			},
		},

	}
</script>
<style>
	page {
		
			background-color: #283b65;
	}
</style>
<style lang="scss" scoped>
	.content {
		color: #c2d5ff;
		box-sizing: border-box;

		.user_bg {
			height: 380rpx;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.user_center {
			border-radius: 40rpx 40rpx 0 0;
			// background:#F2E9E4 ;
			// background: linear-gradient(#F2E9E4 30%, white 100%);
			background-color: #283b65;
			transform: translateY(-100rpx);

			.user_info {
				display: flex;
				height: 200rpx;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx;

				.user_avatar {
					transform: translateY(-60rpx);
					flex: 1;
					margin-right: 10rpx;
				}

				.onlogo {

					view {
						display: flex;
						flex-direction: row;
						justify-content: space-around;

						text {
							font-size: 70rpx;
							font-family: "楷体";
							font-weight: 800;
							color: #c2d5ff;
							text-align: center;
						}
					}
				}

				.user_data {
					flex: 2;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.top {
						display: flex;
						justify-content: space-around;
						margin-top: -50rpx;
						font-size: 25rpx;
					}

					.buttom {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 30rpx;

						.left {
							flex: 2;

							text {
								// color: #212121;
								font-weight: 800;
								font-size: 25rpx;
							}
						}

						.right {
							flex: 1;
							display: flex;
							justify-content: space-around;
							align-items: center;

							text {
								// color: #848484;
								font-size: 25rpx;
							}
						}
					}
				}
			}
		}
	}
</style>